@import './reset';

body{
	background: #F5F8FA;
}
.container{
	width: 100%;
	background: #F5F8FA;
	overflow: hidden;
	.top{
		width: 100%;
		height: calculateRem(40px);
		background: #f5f8fa;
		box-sizing: border-box;
		border-bottom: 1px solid #e5e8ea;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		.nav{
			display: inline-block;
			height: calculateRem(40px);
			line-height: calculateRem(40px);
			max-width: 20%;
			text-align: center;
			color: #2B2E33;
			font-size: calculateRem(15px);
			position: relative;
			&:active{
				background: #ecf3f7;
			}
			&:after{
				content: '';
				display: inline-block;
				width: 1px;
				background: #D5D8DC;
				height: calculateRem(15px);
				position: absolute;
				right: 0;
				top: calculateRem(12px);

			}
			&:last-child{
				&:after{
					display: none;
				}
			}
		}
		.active{
			position: relative;
			color: #F21612;
			&:before{
				content: '';
				display: inline-block;
				position: absolute;
				bottom: 0;
				left: calculateRem(14px);
				right: calculateRem(14px);
				background: #F21612;
				height: 2px;
			}
		}
	}
	.list-wrap{
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding-top: calculateRem(40px);
		overflow: hidden;
		.order{
			background: white;
			padding: 0 calculateRem(16px);
			margin-bottom: calculateRem(10px);
			.top-bar{
				position: relative;
				width: 100%;
				height: calculateRem(50px);
				line-height: calculateRem(50px);
				box-sizing: border-box;
				border-bottom: 1px solid #D8D8D8;
				font-size: calculateRem(16px);
				color: black;
				padding-right: calculateRem(50px);
				@include ell;
				.tag{
					display: inline-block;
					width: calculateRem(48px);
					height: calculateRem(22px);
					line-height: calculateRem(20px);
					box-sizing: border-box;
					text-align: center;
					font-size: calculateRem(12px);
					border-radius: 3px;
					position: absolute;
					right: 0;
					top: calculateRem(14px);
				}
				.unpay{
					color: #FF703A;
					border: 1px solid #FF703A;
				}
				.effect{
					color: #2F9AD8;
					border: 1px solid #2F9AD8;
				}
				.outdeal{
					color: #999;
					border: 1px solid #999;
				}
			}
			.middle{
				width: 100%;
				height: auto;
				box-sizing: border-box;
				padding: calculateRem(16px) 0;
				.m-l{
					width: calculateRem(40px);
					height: calculateRem(40px);
					margin-right: calculateRem(14px);
					>img{
						width: 100%;
						height: 100%;
					}

				}
				.m-r{	
					height: calculateRem(40px);
					max-width: 83%;
					line-height: calculateRem(20px);
					@include mulell(2);
					overflow: hidden;
					font-size: calculateRem(14px);
					color: #4B4B4B;

				}
			}
			.bottom{
				width: 100%;
				height: calculateRem(46px);
				line-height: calculateRem(46px);
				box-sizing: border-box;
				border-top: 1px solid #d8d8d8;
				font-size: calculateRem(15px);
				color: #4B4B4B;
				.b-l{
					width: 70%;
					height: calculateRem(46px);
					float: left;
					@include ell;
				}
				.b-r{
					width: 30%;
					height: calculateRem(46px);
					float: right;
					text-align: right;
					@include ell;
				}
			}
		}
	}
}